import React from 'react';
import { TouchableOpacity, Image } from 'react-native';
import Icon from '../../components/Icon';

import TabNavigator from './MainTabNavigator';
import LoginScreen from '../../screens/LoginScreen';
import UserSettingScreen from '../../screens/UserSettingScreen';
import ReviewScreen from '../../screens/ReviewScreen';
import DeckDetailScreen from '../../screens/DeckDetailScreen';
import { colors, typography } from '../../styles';
import { t } from '../../i18n';

// const headerLeftComponent = props => {
//   return (
//     <TouchableOpacity
//       onPress={props.onPress}
//       style={{
//         paddingLeft: 10,
//       }}
//     >
//       <Icon name="arrow-back" size={20} color={colors.text.secondary} />
//     </TouchableOpacity>
//   );
// };

// const headerBackground = require('../../../assets/images/topBarBg.png');

const StackNavigationData = [
  {
    name: 'MainTabs',
    component: TabNavigator,
    headerLeft: null,
    // headerBackground: { source: headerBackground },
    headerTitleStyle: {
      fontFamily: typography.fonts.regular,
      color: colors.text.primary,
      fontSize: typography.sizes.lg,
    },
    headerShown: false,
  },
  {
    name: 'Login',
    title: t('navigator.login'),
    component: LoginScreen,
    // headerLeft: headerLeftComponent,
    // headerBackground: { source: headerBackground },
    headerTitleStyle: {
      fontFamily: typography.fonts.regular,
      color: colors.text.primary,
      fontSize: typography.sizes.lg,
    },
  },
  {
    name: 'UserSetting',
    title: t('navigator.profile_settings'),
    component: UserSettingScreen,
    // headerLeft: headerLeftComponent,
    // headerBackground: { source: headerBackground },
    headerTitleStyle: {
      fontFamily: typography.fonts.regular,
      color: colors.text.primary,
      fontSize: typography.sizes.lg,
    },
  },
  {
    name: 'Review',
    title: t('navigator.review'),
    component: ReviewScreen,
    // headerLeft: headerLeftComponent,
    // headerBackground: { source: headerBackground },
    headerTitleStyle: {
      fontFamily: typography.fonts.regular,
      color: colors.text.primary,
      fontSize: typography.sizes.lg,
    },
  },
  {
    name: 'DeckDetail',
    title: t('navigator.cards'),
    component: DeckDetailScreen,
    // headerLeft: headerLeftComponent,
    // headerBackground: { source: headerBackground },
    headerTitleStyle: {
      fontFamily: typography.fonts.regular,
      color: colors.text.primary,
      fontSize: typography.sizes.lg,
    },
  },
];

export default StackNavigationData;
